<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

	<style type="text/css">
		body {
			height: 100%;
			margin: 0;
			padding: 0px;
			z-index: 0
		}

		html {
			height: 100%
		}

		#container {
			height: 100%;
			position: relative;
			z-index: 1;
		}

		#dashboard {
			position: fixed;
			top: 0;
			height: 100%;
			width: 14%;
			right: 0;
			z-index: 99;
			background-color: white;
			opacity: 80%;
		}

		.block {
			height: 20%;
			width: 100%;
			background-color: white;
		}
	</style>
	<!-- <link rel="shortcut icon" href="./favicon.ico"> -->
	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=DUS3zgcXlPG5gyjfdSra8NfpOblj7Ggr"></script>
	<!-- <script type="text/javascript"
		src="https://api.map.baidu.com/api?v=1.0&ak=DUS3zgcXlPG5gyjfdSra8NfpOblj7Ggr"></script> -->
	<!-- <script src="https://mapv.baidu.com/build/mapv.min.js"></script> -->
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/echarts/5.0.0/echarts.min.js"></script>
	<title>船舶交通流仿真平台</title>
	<link rel="icon" href="/static/favicon.ico" type="image/x-icon" />
</head>

<body>
	<div id="container"></div>
	<script type="text/javascript">
		// 百度地图API功能
		var map = new BMapGL.Map("container");
		// map.centerAndZoom(new BMapGL.Point(118.43458, 31.68515), 17);
		map.centerAndZoom(new BMapGL.Point(118.44639734746508, 31.6896946704486), 17);
		map.enableScrollWheelZoom(); // 使能缩放
		// 按住鼠标右键，修改倾斜角和角度
		// 开启这两项以启用3D
		// map.setHeading(64.5); //设置地图旋转角度
		// map.setTilt(73); //设置地图的倾斜角度
		var selectedShipMmsi = 0;

		function myAddOverlay(map, ship) {
			// console.log("ship: ", ship);
			let icon = new BMapGL.Icon("../static/5-15-25.svg", new BMapGL.Size(15, 25), {
				imageOffset: new BMapGL.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
			});
			let pt = new BMapGL.Point(ship.lon, ship.lat);
			let shipMarker = new BMapGL.Marker(pt, {
				icon: icon,
				// rotation: 245,
			});
			// shipMarker.setRotation(ship.head + map.getHeading());
			// shipMarker.addEventListener("onclick", function () {
			// 	selectedShipMmsi = ship.mmsi;
			// })
			// 向地图添加图标
			map.addOverlay(shipMarker);
		}
		let ship = {
			lon: 118.44639734746508, 
			lat: 31.6896946704486
		}
		myAddOverlay(map, ship);

	</script>
</body>

</html>